<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>旧机入库</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--插件样式-->
    <link href="/dist/plugins/ztree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/dist/plugins/webuploader-0.1.5/webuploader.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=f5a12a1d">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=16f1e6f3">
    <style>
        .table > tbody > tr > td {
            height: 30px;
            max-height: 44px;
            padding: 0 2px;
        }

        td {
            position: relative;
        }

        .table .td-value span {
            line-height: 22px;
        }

        .saveModle .top {
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            padding-left: 7px;
            border-bottom: 1px solid #cfcfcf;
            background: #fff;
        }

        .saveModle .top .title {
            height: 32px;
            line-height: 32px;
            font-size: 14px;
            font-weight: bold;
            color: #333;
            float: left;
            background: #fff;
        }

        .saveModle .top .btn {
            font-size: 20px;
            width: 34px;
            height: 22px;
            line-height: 12px;
            display: inline-block;
            float: right;
        }

        .saveModle .top .btn:hover {
            color: red;
        }

        .saveModle .saveBtn {
            margin: 0 auto;
            margin-top: 35px;
            display: block;

        }

        span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2a8cec !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            /* max-height: 30px; */
            line-height: 24px;
            height: 24px;
        }

        .lineOne span {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2a8cec !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            /* max-height: 30px; */
            line-height: 24px;
            height: 24px;
        }

        p {
            display: inline-block;
            margin-bottom: 0px;
            line-height: 25px;
            padding-right: 15px;
            color: #228bee;
            font-size: 14px;
        }

        .td-value span.lineOne {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #2a8cec !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            /* max-height: 30px; */
            line-height: 24px;
            height: 24px;
        }

        .td-value {
            text-align: left !important;
            vertical-align: middle;
            word-wrap: break-word;
            color: black !important;
        }

        td {
            height: 47.78px;
        }

        .td-value span {
            display: inline-block;
            overflow: hidden;
            padding-left: 0.06rem;
            word-wrap: break-word;
            color: black !important;
        }

        .div-td-content-more {
            position: absolute;
            height: auto;
            z-index: 999;
            line-height: 20px;
            background-color: #d3e8fd;
            padding: 8px 6px;
            border: 1px solid #e8e8ea;
            display: none;
        }

        .div-td-content-more i {
            width: 15px;
            height: 12px;
            background: url("/dist/img/more-icon.png");
            position: absolute;
            left: 50px;
            top: -12px;
        }

        .fixed-table_body tr td {
            border-right: none;
            font-size: 12px;
            text-align: center;
        }

        .fixed-table_header tr th {
            border-right: none;
            background: #d3e8fd !important;
            color: black !important;
            font-weight: normal;
            font-size: 12px;
        }

        .nav > li > a {
            padding: 10px 10px;
        }

        .nav-tabs-custom > .nav-tabs > li.active {
            color: #2a8cec;
        }

        .nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .nav-tabs > li.active:hover > a {
            background: #fff;
            color: #2a8cec;
            border-top-left-radius: 0px;
            border-top-right-radius: 0px;
        }

        .nav-tabs-custom > .nav-tabs {
            /*border-bottom-color: #fff;*/
        }

        .model-picker-dropdown {
            position: absolute;
            width: 315px;
            left: -9999px;
            top: -9999px;
            outline: 0;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            z-index: 999999;
            display: none;
            min-width: 200px;
            margin-bottom: 20px;
            margin-top: 5px;
        }

        .model-select {
            font-size: 16px;
        }

        .model-select dl {
            line-height: 2;
            clear: both;
            padding: 3px 0;
            margin: 0;
            max-height: 200px;
            overflow-y: scroll;
        }

        .model-select-content {
            width: 100%;
            min-height: 50px;
            background-color: #fff;
            padding: 5px 5px;
        }

        .model-select a:hover,
        .model-select a:focus {
            background-color: #f1f8ff;
            border-radius: 2px;
            color: #46A4FF;
        }

        .model-select a.active {
            background-color: #46A4FF;
            color: #fff;
            border-radius: 2px;
        }

        .td-value span {
            padding-left: 6px;
        }

        textarea {
            height: 56px;
            width: 100%;
            border: none;
            outline: none;
            -webkit-appearance: none;
            resize: none;
            padding-top: 20px;
            padding-left: 20px;
        }

        .textareaSpan {
            max-height: 56px;
            line-height: 18px !important;
            overflow: hidden !important;
            text-overflow: ellipsis;
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        .content {
            padding: 0px 8px;
        }

        .biTian {
            position: absolute;
            color: red;
            margin-left: -10px;
            margin-top: 3px;
        }

        #selectDevice {
            width: 600px;
            height: 300px;
            margin: auto;
            position: absolute;
            top: 40%;
            left: 50%;
            margin-left: -250px;
            margin-top: -100px;
            z-index: 111;
            display: none;
            background: #fff;
            border: 1px solid #cbcbcd;
        }

        #selectDevice tr th {
            background: #d3e8fd !important;
            color: black !important;
            text-align: center;
        }

        .td-value select {
            color: #2a8cec;
            font-size: 12px;
            padding-left: 1px;
        }

        #selectDevice th {
            border: 0px;
        }

        #selectDevice td {
            border: 0px;
            border-bottom: 1px solid rgb(203, 203, 205);
        }

        .userName {
            text-align: justify !important;
            display: inline-block !important;
            overflow: hidden !important;
            vertical-align: middle !important;
            height: 24px !important;
            line-height: 24px !important;
            width: 46px !important;
        }

        .userName:after {
            content: " ";
            display: inline-block;
            width: 100%;
        }
    </style>
</head>
<body>
<section class="content iframeH" id="app" v-cloak style="height: 100%">
    <div class="div-td-content-more"><i></i></div>
    <!--    省市县-->
    <div class="model-picker-dropdown">
        <div class="model-select-wrap">
            <div class="model-select-tab">
                <a class="active" data-count="type">省</a>
                <a class="" data-count="brand">市</a>
                <a data-count="model" class="">县</a>
            </div>
            <div class="model-select-content">
                <div class="model-select type" data-count="type" style="display: block;">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="item in itemsType">{{item.name}}</a>
                    </dl>
                </div>
                <div class="model-select brand" data-count="province">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in itemsBran">{{item.name}}</a>
                    </dl>
                </div>
                <div class="model-select model" data-count="model">
                    <dl class="clearfix">
                        <a class="" :attr-id="item.id" v-for="(item,i) in itemsMod">{{item.name}}</a>
                    </dl>
                </div>
            </div>
        </div>
    </div>
    <!--选择设备-->
    <div id="selectDevice">
        <table class="table  table-detail table-bordered text-center" style="table-layout: auto;border: 0px;">
            <thead>
            <tr style="position:relative;">
                <th colspan="7" style="background: #fff !important;height: 30px;">选择设备</th>
                <div style="position:absolute;padding-top:5px;right:0px;text-align: center;width: 30px;height: 30px;cursor: pointer"
                     @click="buttonX">X
                </div>
            </tr>
            <tr>
                <th style="width: 30px;"></th>
                <th style="width: 80px;">经销商</th>
                <th style="width: 80px;">设备型号</th>
                <th style="width: 80px;">序列号</th>
                <th style="width: 100px;">交机日期</th>
                <th style="width: 80px;">工作小时</th>
                <th>工地</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in customerDeviceList">
                <td style="width:30px">
                    <span style="color:#2a8cec;cursor: pointer;text-align: center;"
                          @click="checkDevice(item)">选择
                    </span>
                </td>
                <td style="width:80px;text-align: center;"></td>
                <td style="width:80px;text-align: center;">{{item.deviceType}}</td>
                <td style="width:80px;text-align: center;">{{item.sequence}}</td>
                <td style="width:100px;text-align: center;">{{item.dateOfDevice}}</td>
                <td style="width:80px;text-align: center;">{{item.workHours}}</td>
                <td>{{item.siteLocation}}{{item.siteLocationDetail}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="center" style="overflow: auto;height: 100%" id="scrollDiv">
        <table class="table table-detail table-bordered text-center" id="oldSample">
            <!--基本信息展示-->
            <tr class="no-print">
                <td colspan="8" class=" no-print  title">基本信息</td>
            </tr>
            <tr>
                <td class="td-title">
                    报修单号
                </td>
                <td class="td-value">
                    <span v-if="repairInfo.repair.consultNo" class="lineOne">{{repairInfo.repair.consultNo}}</span>
                    <span v-else class="lineOne">保存后自动生成</span>
                </td>
                <td class="td-title">
                    报修时间
                </td>
                <td class="td-value">
                    <span v-if="repairInfo.repair.createTime">{{repairInfo.repair.createTime}}</span>
                    <span v-else>保存后自动生成</span>
                </td>
                <td class="td-title">
                    状态
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <select v-model="repairInfo.repair.repairStatus" class="form-control">
                            <option value="" selected="selected"></option>
                            <option v-for="s in item.status" v-bind:value="s.key">{{s.value}}</option>
                        </select>
                    </template>
                    <template v-else>
                        <span>  {{getServeConsultStatus(repairInfo.repair.repairStatus)}} </span>
                    </template>
                </td>
                <td class="td-title">
                    经销商内部报修
                </td>
                <td class="td-value">
                    <select v-model="repairInfo.repair.internalOfRepair" class="form-control"
                            v-if="pageType=='edit'">
                        <option value="" selected="selected"></option>
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                    <span v-else>{{repairInfo.repair.internalOfRepair == 1?'是':'否'}}    </span>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    400报修单号
                </td>
                <td class="td-value">
                    <span class="lineOne">{{repairInfo.repair.serialNo}}</span>
                </td>
                <td class="td-title">
                    登记人姓名
                </td>
                <td class="td-value">
                    <span v-if="repairInfo.repair.createUserName" style="text-align: justify !important;"
                          class="userName">{{repairInfo.repair.createUserName}}</span>
                    <span v-else class="userName"
                          style="text-align: justify !important;">{{getCurrentUser().name}}</span>
                </td>
                <td colspan="4"></td>
            </tr>
            <!--客户信息-->
            <tr class="no-print">
                <td colspan="8" class=" no-print  title">客户信息</td>
            </tr>
            <tr>
                <td class="td-title">
                    来电人姓名
                </td>
                <td class="td-value">
                    <input class="td-value" placeholder="请输入来电人姓名" type="text"
                           v-model="repairInfo.repair.callerName" id="callerName" v-if="pageType=='edit'"/>
                    <span v-else class="userName" style="text-align: justify !important;"> {{repairInfo.repair.callerName}} </span>
                </td>
                <td class="td-title">
                    来电人电话
                </td>
                <td class="td-value">
                    <input class="td-value" placeholder="请输入来电人电话" type="text"
                           v-model="repairInfo.repair.callerTel" id="callerTel" v-if="pageType=='edit'"/>
                    <span v-else>{{repairInfo.repair.callerTel}} </span>
                </td>
                <td class="td-title">
                    客户姓名
                </td>
                <td class="td-value">
                    <input class="td-value" id="customerName" placeholder="请输入客户姓名" type="text"
                           v-model="repairInfo.repair.customerName" v-if="pageType=='edit'"/>
                    <span v-else class="userName" style="text-align: justify !important;"> {{repairInfo.repair.customerName}} </span>
                </td>
                <td class="td-title">
                    客户电话
                </td>
                <td class="td-value">
                    <input class="td-value" placeholder="请输入客户电话" type="text"
                           v-model="repairInfo.repair.customerTel" v-if="pageType=='edit'"/>
                    <span v-else>  {{repairInfo.repair.customerTel}} </span>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    来电人类型
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <select v-model="repairInfo.repair.callerType" class="form-control">
                            <option value="" selected="selected"></option>
                            <option v-for="c in item.callerType" v-bind:value="c.key">{{c.value}}</option>
                        </select>
                    </template>
                    <template v-else>
                        <span> {{getCallerType(repairInfo.repair.callerType)}} </span>
                    </template>
                </td>
                <td colspan="6"></td>
            </tr>
            <!--设备信息-->
            <tr class="no-print">
                <td colspan="8" class=" no-print  title">
                    设备信息
                    <span style="color:#2a8cec;right: 10px; position: absolute;cursor: pointer;"
                          @click="selectDevice()" v-if="pageType=='edit'">选择设备</span>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <i class="biTian">*</i> 报修类型
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <select v-model="repairInfo.repair.repairType" class="form-control">
                            <option value="" selected="selected"></option>
                            <option v-for="r in item.repairTyppe" v-bind:value="r.key">{{r.value}}</option>
                        </select>
                    </template>
                    <template v-else>
                        <span> {{getServeRepairTyppe(repairInfo.repair.repairType)}} </span>
                    </template>
                </td>
                <td class="td-title">
                    设备品牌
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <select v-model="repairInfo.device.deviceBrandId"
                                @change="getDeviceType(repairInfo.device.deviceBrandId,'change')"
                                class="form-control">
                            <option value="" selected="selected"></option>
                            <option v-for="d in item.deviceBrand" v-bind:value="d.id">{{d.name}}</option>
                        </select>
                    </template>
                    <template v-else>
                        <span>  {{repairInfo.device.deviceBrand}} </span>
                    </template>
                </td>
                <td class="td-title">
                    设备类型
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <select v-model="repairInfo.device.deviceTypeId" @change="getDeviceModel('change')"
                                class="form-control">
                            <option value="" selected="selected"></option>
                            <option v-for="d in item.deviceType" v-bind:value="d.id">{{d.name}}</option>
                        </select>
                    </template>
                    <template v-else>
                        <span>  {{repairInfo.device.deviceType}} </span>
                    </template>
                </td>
                <td class="td-title">
                    设备型号
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <select v-model="repairInfo.device.deviceModelId" class="form-control">
                            <option value="" selected="selected"></option>
                            <option v-for="d in item.deviceModel" v-bind:value="d.id">{{d.modelName}}
                            </option>
                        </select>
                    </template>
                    <template v-else>
                        <span>{{repairInfo.device.deviceModel}} </span>
                    </template>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    设备序列号
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <input class="td-value" placeholder="请输入设备序列号" type="text"
                               v-model="repairInfo.device.sequence"/>
                    </template>
                    <template v-else>
                        <span> {{repairInfo.device.sequence}} </span>
                    </template>
                </td>
                <td class="td-title">
                    交机日期
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <input class="pull-left form-control pull-left input-sm" type="text"
                               v-model="repairInfo.device.dateOfDevice"
                               @focus="showDatePicker($event,'device','dateOfDevice','ymd')" placeholder="请选择交机日期">
                    </template>
                    <template v-else>
                        <span> {{repairInfo.device.dateOfDevice}} </span>
                    </template>
                </td>
                <td class="td-title">
                    工作小时
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <input class="td-value" placeholder="请输入工作小时" type="text"
                               v-model="repairInfo.device.workHours"/>
                    </template>
                    <template v-else>
                        <span>{{repairInfo.device.workHours}} </span>
                    </template>
                </td>
                <td class="td-title">
                    质保状态
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <select v-model="repairInfo.device.warrantyStatus" class="form-control">
                            <option value="" selected="selected"></option>
                            <option v-for="d in item.serveWarrantyStatus" v-bind:value="d.key">{{d.value}}
                            </option>
                        </select>
                    </template>
                    <template v-else>
                        <span>   {{getServeWarrantyStatus(repairInfo.device.warrantyStatus)}} </span>
                    </template>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    工地位置（省市县）
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <input class="td-value selectModel" placeholder="请输入工地位置"
                               v-model="repairInfo.device.siteLocation" type="text"/>
                    </template>
                    <template v-else>
                        <span>  {{repairInfo.device.siteLocation}} </span>
                    </template>
                </td>
                <td class="td-title">
                    详细地址
                </td>
                <td class="td-value" colspan="3">
                    <template v-if="pageType=='edit'">
                        <input placeholder="请输入详细地址"
                               v-model="repairInfo.device.siteLocationDetail" type="text"/>
                    </template>
                    <template v-else>
                        <span>  {{repairInfo.device.siteLocationDetail}} </span>
                    </template>
                </td>
                <td class="td-title">
                    设备是否停机
                </td>
                <td class="td-value">
                    <select v-model="repairInfo.device.halt" class="form-control" v-if="pageType=='edit'">
                        <option value="" selected="selected"></option>
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                    <span v-else> {{repairInfo.device.halt == 1?'是':'否'}}</span>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <i class="biTian">*</i> 报修内容登记
                </td>
                <td colspan="7" class="td-value" style="height: 60px;">
                             <textarea v-model="repairInfo.repair.registerContent" v-if="pageType=='edit'"
                                       style="padding-top: 0px !important;  color: #2a8cec !important;line-height: 20px;">
                             </textarea>
                    <span v-else class="textareaSpan lineOne"> {{repairInfo.repair.registerContent}} </span>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <i class="biTian">*</i> 现场联系人身份
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <select v-model="repairInfo.repair.liveLinkmanType" class="form-control">
                            <option value="" selected="selected"></option>
                            <option v-for="d in item.callerType" v-bind:value="d.key">{{d.value}}</option>
                        </select>
                    </template>
                    <template v-else>
                        <span>  {{getCallerType(repairInfo.repair.liveLinkmanType)}} </span>
                    </template>
                </td>
                <td class="td-title">
                    <i class="biTian">*</i> 现场联系人姓名
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <input class="td-value" placeholder="请输入现场联系人姓名" type="text"
                               v-model="repairInfo.repair.liveLinkmanName" id="livelinkmanName"/>
                    </template>
                    <template v-else>
                        <span class="userName" style="text-align: justify !important;">{{repairInfo.repair.liveLinkmanName}} </span>
                    </template>
                </td>
                <td class="td-title">
                    <i class="biTian">*</i>现场联系人电话
                </td>
                <td class="td-value" colspan="3">
                    <template v-if="pageType=='edit'">
                        <input class="td-value" placeholder="请输入现场联系人电话" type="text"
                               v-model="repairInfo.repair.liveLinkmanTel"/>
                    </template>
                    <template v-else>
                        <span>  {{repairInfo.repair.liveLinkmanTel}} </span>
                    </template>
                </td>

            </tr>
            <!--受理服务人员信息-->
            <tr class="no-print">
                <td colspan="8" class=" no-print  title">受理服务人员信息</td>
            </tr>
            <tr>
                <td class="td-title">
                    预约日期
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <input class="pull-left form-control pull-left input-sm" type="text"
                               v-model="repairInfo.repair.appointDate"
                               @focus="showDatePicker($event,'repair','appointDate','ymd')" placeholder="请选择预约日期">
                    </template>
                    <template v-else>
                        <span>  {{repairInfo.repair.appointDate}} </span>
                    </template>
                </td>
                <td class="td-title">
                    预约时间
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <input class="pull-left form-control pull-left input-sm" type="text"
                               @focus="showDatePicker($event,'repair','appointTime','hms')"
                               v-model="repairInfo.repair.appointTime" placeholder="请选择预约时间"/>
                    </template>
                    <template v-else>
                        <span>   {{repairInfo.repair.appointTime}} </span>
                    </template>
                </td>
                <td class="td-title">
                    <i class="biTian">*</i> 指派服务站
                </td>
                <td class="td-value">
                    <select v-if="pageType=='edit'" v-model="repairInfo.repair.serverStationId"
                            @change="getAcceptName('change')"
                            class="form-control">
                        <option value="" selected="selected"></option>
                        <option v-for="d in item.servceStation" v-bind:value="d.stationId">{{d.stationName}}</option>
                    </select>
                    <span v-else>  {{repairInfo.repair.serverStation}} </span>
                </td>
                <td class="td-title">
                    <i class="biTian">*</i> 受理责任人
                </td>
                <td class="td-value">
                    <select v-if="pageType=='edit'" v-model="repairInfo.repair.acceptId" class="form-control"
                            @change="getTelById('change')">
                        <option value="" selected="selected"></option>
                        <option v-for="d in item.acceptName" v-bind:value="d.acceptorId">
                            {{d.acceptorName}}
                        </option>
                    </select>
                    <span v-else> {{repairInfo.repair.acceptName}} </span>
                </td>
            </tr>
            <tr>
                <td class="td-title">
                    <i class="biTian">*</i> 手机号码
                </td>
                <td class="td-value">
                    <template v-if="pageType=='edit'">
                        <input class="td-value" placeholder="请输入手机号码" type="text"
                               v-model="repairInfo.repair.acceptTel"/>
                    </template>
                    <template v-else>
                        <span>  {{repairInfo.repair.acceptTel}} </span>
                    </template>
                </td>
                <td class="td-title">
                    发送短信
                </td>
                <td class="td-value">
                    <select v-if="pageType=='edit'" v-model="repairInfo.repair.messageFlag" class="form-control">
                        <option value="" selected="selected"></option>
                        <option value="1">是</option>
                        <option value="0">否</option>
                    </select>
                    <span v-else> {{repairInfo.repair.messageFlag == 1?'是':'否'}} </span>
                </td>
                <td colspan="4"></td>
            </tr>
        </table>
        <div style="padding: 10px 0;text-align:center;" v-if="pageType=='edit'">
            <input type="button" id="pass" class="btn oaBtn btn-sm" @click="save()" value="保存">
        </div>
    </div>
</section>
</body>
<!--JQ-->
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<script>window.jQuery || document.write('<script src="/dist/plugins/jQuery/jquery-2.2.3.min.js"><\/script>', '<script src="/dist/plugins/bootstrap/js/bootstrap.min.js"><\/script>', '<script src="/dist/plugins/vue/vue.min.js"><\/script>')</script>
<script src="/dist/plugins/jQuery/jquery.cookie.min.js"></script>
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<!--插件JS-->
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=0b5caf39"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=0c4d95a9"></script>
<script type="text/javascript" src="/dist/plugins/My97DatePicker/WdatePicker.js"></script>
<!--ztree组件所需js-->
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="/dist/plugins/ztree/js/jquery.ztree.exhide-3.5.js"></script>
<script src="/dist/plugins/webuploader-0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/dist/js/pages/apply/money/class.js?v1.0"></script>
<script type="text/javascript" src="/dist/js/pages/system/systemService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/commonService.js"></script>
<script type="text/javascript" src="/dist/js/pages/common/changeMoneyToChinese.js"></script>
<script type="text/javascript" src="/dist/plugins/print/print.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script src="enum.js"></script>
<script>
    $(function () {
        $("body").on("click", ".lineOne", function (e) {
            if ($(".div-td-content-more").is(":hidden")) {
                var text = $(this).text();
                if (text != "") {
                    text = "<i></i>" + text;
                    $(".div-td-content-more").html(text).css({
                        "width": $(this).outerWidth() + "px",
                        "left": $(this).offset().left,
                        "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                    }).show();
                    e.stopPropagation();
                }
            } else {
                $(".div-td-content-more").hide();
            }
        });
        $("body").on("click", ".div-td-content-more", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".div-td-content-more").hide();
        });
    });
</script>

<script type="text/javascript">

    var api = frameElement.api;
    $(function () {
        $("body").on("click", ".selectModel", function (e) {
            if ($(".model-picker-dropdown").is(":hidden")) {
                $(".model-picker-dropdown").css({
                    "width": $(this).outerWidth() + "px",
                    "left": $(this).offset().left,
                    "top": ($(this).offset().top + $(this).outerHeight()) + "px"
                }).show();
                e.stopPropagation();
            } else {
                $(".model-picker-dropdown").hide();
            }
        });
        $("body").on("click", ".model-select-tab a", function (e) {
            $(this).parent().find("a").removeClass("active");
            $(this).addClass("active");
            var boxName = $(this).attr("data-count");
            $(".model-select").hide();
            $(".model-select-content" + " ." + boxName).show();

        });
        $("body").on("click", ".model-select  a", function (e) {
            if ($(this).hasClass("active")) {
                return false;
            }
            $(this).parent().find("a").removeClass("active");
            var id = $(this).attr("attr-id");
            $(this).addClass("active");
            var val = $(this).text();
            if ($(this).parents(".model-select").hasClass("type")) {
                $(".model-select-tab a").removeClass("active");
                $(".model-select-tab a[data-count=brand]").addClass("active");
                $(".model-select").hide();
                app.provinceName = val;
                app.cityName = '';
                app.countyName = '';
                app.getCity(id);
                $(".model-select-content .brand").show();

            } else if ($(this).parents(".model-select").hasClass("brand")) {
                $(".model-select-tab a").removeClass("active");
                var id = $(this).attr("attr-id");
                $(".model-select-tab a[data-count=model]").addClass("active");
                $(".model-select").hide();
                app.cityName = val;
                app.countyName = '';
                app.getCounty(id);
                $(".model-select-content .model").show();

            } else {
                app.countyName = val;
                app.repairInfo.device.siteLocation = app.provinceName + "-" + app.cityName + "-" + app.countyName
                $(".model-picker-dropdown").hide();
            }
        })
        $("body").on("click", ".model-picker-dropdown", function (e) {
            e.stopPropagation();
        });
        $("body").on("click", function () {
            $(".model-picker-dropdown").hide();
        });

    });

    Vue.directive('onedate', {
        // 当被绑定的元素插入到 DOM 中时……
        update: function (el, binding) {
            // 聚焦元素
            if (app.pageType != 'add') {
                if (el.value == "NaN.undefined" || el.value == "") {
                    el.value = binding.value
                }
            }
        },
        componentUpdated: function (el, binding) {
            // 聚焦元素
        }
    })

    var api = frameElement.api;
    var app = new Vue({
        el: '#app',
        data: {
            itemsBran: [],
            itemsType: [],
            itemsMod: [],
            provinceName: '',
            cityName: '',
            countyName: '',
            //0查看，1新增，2修改
            pageType: 0,
            repairInfo: {
                device: {
                    id: '',
                    mainId: "",
                    deviceBrand: "",
                    deviceBrandId: "",
                    deviceType: "",
                    deviceTypeId: "",
                    deviceModel: "",
                    deviceModelId: "",
                    sequence: "",
                    dateOfDevice: "",
                    workHours: "",
                    warrantyStatus: "",
                    siteLocation: "",
                    halt: -1,
                    siteLocationDetail: "",
                },
                repair: {
                    id: "",
                    mainId: "",
                    consultNo: "",
                    createTime: "",
                    internalOfRepair: "",
                    createUserName: getCurrentUser().name,
                    createUserId: getCurrentUser().id,
                    registerContent: "",
                    remark: "",
                    liveLinkmanType: "",
                    liveLinkmanName: "",
                    liveLinkmanTel: "",
                    customerName: "",
                    customerId: "",
                    customerTel: "",
                    callerName: "",
                    callerId: "",
                    callerTel: "",
                    repairType: "",
                    serialNo: "",
                    repariName: "",
                    repairSequence: "",
                    repairStatus: "",
                    halt: "",
                    appointDate: "",
                    appointTime: "",
                    serverStationId: "",
                    serverStation: "",
                    acceptId: "",
                    acceptTel: "",
                }
            },
            item: {
                status: [],
                callerType: [],
                repairTyppe: [],
                deviceBrand: [],
                deviceType: [],
                deviceModel: [],
                warrantyStatus: [],
                serveLinkMan: [],
                servceStation: [],
                acceptName: [],
                deviceInfo: {},
            },
            customerDeviceList: [],

        },
        methods: {
            selectDevice: function () {
                var that = this;
                $("#selectDevice").toggle();
                that.getDeviceList();
            },
            buttonX: function () {
                var that = this;
                $("#selectDevice").toggle();
            },
            checkDevice: function (item) {
                var that = this;
                $.wyui.postMethod("/serveDevice/getDeviceById.json", {id: item.id}, function (data) {
                    that.repairInfo.device = data;
                    that.getDeviceBrand();
                    $("#selectDevice").toggle();
                });
            },
            //时间选择器插件
            showDatePicker: function (e, key1, key2, fmt) {
                var that = this;
                var dateFmt = 'yyyy-MM-dd HH:mm:ss'
                if (fmt) {
                    if (fmt == 'ymd') {
                        dateFmt = 'yyyy-MM-dd'
                    } else if (fmt == 'hms') {
                        dateFmt = 'HH:mm:ss'
                    }
                }
                WdatePicker({
                    onpicked: function (dp) {
                        that.repairInfo[key1][key2] = dp.cal.getNewDateStr();
                        return true;
                    },
                    dateFmt: dateFmt
                });
                $(e.target).blur();
            },
            //页面修改保存方法
            save: function () {
                var that = this;

                if (that.repairInfo.repair.repairType == '') {
                    alert('报修类型不能为空！');
                    return;
                }
                if (that.repairInfo.repair.registerContent == '') {
                    alert('保修内容登记不能为空！');
                    return;
                }
                if (that.repairInfo.repair.serverStationId == '') {
                    alert('指派服务站不能为空！');
                    return;
                }
                if (that.repairInfo.repair.acceptId == '') {
                    alert('受理责任人不能为空！');
                    return;
                }
                if (that.repairInfo.repair.liveLinkmanType == '') {
                    alert('现场联系人身份不能为空！');
                    return;
                }
                if (that.repairInfo.repair.liveLinkmanName == '') {
                    alert('现场联系人姓名！');
                    return;
                }
                if (!that.repairInfo.repair.liveLinkmanTel || that.repairInfo.repair.liveLinkmanTel.length < 11) {
                    alert('现场联系人电话格式不正确！');
                    return false;
                }

                delete this.repairInfo.device.createTime;
                delete this.repairInfo.repair.createTime;
                $.wyui.postMethod("/serveRepair/save.json", trimRN(this.repairInfo), function (data) {
                    alert("保存成功！");
                    var $iframe = top.findIframeByName("400");
                    $iframe[0].contentWindow.$("#iframeBox")[0].contentWindow.app.getList();
                    var pageId = top.getActivePageId();
                    top.closeTabByPageId("baoXiu");
                    top.closeTabByPageId(pageId);
                });
            },
            //根据枚举表类型获取枚举数据
            getEnumByModuleType: function (moduleType, key) {
                var that = this;
                $.wyui.postMethod("/serveEnum/getEnumByModuleType.json", {moduleType: moduleType}, function (data) {
                    that.item[key] = data;
                });
            },
            //获取设备品牌信息下拉
            getDeviceBrand: function () {
                var that = this;
                $.wyui.postMethod("/deviceBrand/getBrandPage2.json", {}, function (data) {
                    that.item.deviceBrand = data.records;
                    that.getDeviceType(that.repairInfo.device.deviceBrandId);
                });
            },
            getDeviceType: function (id,type) {
                var that = this;
                if(type){
                    that.repairInfo.device.deviceType='';
                    that.repairInfo.device.deviceTypeId='';
                    that.repairInfo.device.deviceModel='';
                    that.repairInfo.device.deviceModelId='';
                }
                if (id && id != '') {
                    $.wyui.postMethod("/deviceBrand/getDeviceTypeList.json", {brandId: id}, function (data) {
                        that.item.deviceType = data.devicetypes;
                        that.getDeviceModel();
                    });
                }
            },
            getDeviceModel: function (type) {
                var that = this;
                if(type){
                    that.repairInfo.device.deviceModel='';
                    that.repairInfo.device.deviceModelId='';
                }
                if (that.repairInfo.device.deviceBrandId && that.repairInfo.device.deviceBrandId != '' && that.repairInfo.device.deviceTypeId && that.repairInfo.device.deviceTypeId != '') {
                    $.wyui.postMethod("/deviceModel/getModelListByBrandId.json", {
                        brandId: that.repairInfo.device.deviceBrandId,
                        deviceTypeId: that.repairInfo.device.deviceTypeId,
                    }, function (data) {
                        that.item.deviceModel = data.models;
                    });
                }

            },
            //获取服务站信息下拉
            getServceStation: function () {
                var that = this;
                $.wyui.postMethod("/serveStation/getServeStationList.json", {}, function (data) {
                    that.item.servceStation = data.records;
                    that.getAcceptName();
                });
            },
            //获取受理人下拉
            getAcceptName: function (type) {
                var that = this;
                if (type) {
                    that.repairInfo.repair.acceptName = '';
                    that.repairInfo.repair.acceptTel = '';
                    that.repairInfo.repair.acceptId = '';
                }
                if (that.repairInfo.repair.serverStationId) {
                    $.wyui.postMethod("/serveStation/getServeStationAcceptorList.json", {
                        'stationId': that.repairInfo.repair.serverStationId,
                        'companyId': ''
                    }, function (data) {
                        that.item.acceptName = data.records;
                    });
                }
            },
            //省市三级联动
            getCity: function (id) {
                var that = this;
                that.cityId = "市区";
                that.countyId = "县";
                that.itemsMod = "";
                var data = {};
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': id}, function (r) {
                    that.itemsBran = r.records;
                })
            },
            getCounty: function (id) {
                var that = this;
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': id}, function (r) {
                    that.itemsMod = r.records;
                })

            },
            getTelById: function (type) {
                var that = this;
                if (type) {
                    that.repairInfo.repair.acceptTel = '';
                }
                if (that.repairInfo.repair.acceptId && that.repairInfo.repair.acceptId != '') {
                    $.wyui.postMethod('/user/getById.json', {'userId': that.repairInfo.repair.acceptId}, function (r) {
                        that.repairInfo.repair.acceptTel = r.tel;
                    })
                }
            },
            inputFocus: function (id) {
                $("#" + id).focus();
            },
            //页面展示省市三级联动信息
            showDz: function () {
                var html = '';
                if (this.provinceName) {
                    html += this.provinceName;
                }
                if (this.cityName != '') {
                    html += "-" + this.cityName;
                }
                if (this.countyName != '') {
                    html += "-" + this.countyName;
                }
                this.repairInfo.device.siteLocation = html;
                return html;
            },
            //获取下拉数据
            iniItem: function () {
                var that = this;
                //获取报修单状态
                that.getEnumByModuleType("serveConsultStatus", 'status');
                //获取来电人类型
                that.getEnumByModuleType("callerType", "callerType");
                //获取报修类型
                that.getEnumByModuleType("serveRepairTyppe", "repairTyppe");
                //获取质保状态
                that.getEnumByModuleType("serveWarrantyStatus", "serveWarrantyStatus");
                //获取设备品牌
                that.getDeviceBrand();
                //获取服务站信息
                that.getServceStation();
                /*获取省份*/
                $.wyui.postMethod('/intentCustomer/getForProvinceById.json', {'id': '0'}, function (r) {
                    that.itemsType = r.records;
                })
            },
            splitData: function (data) {
                var that = this;
                that.repairInfo.device.deviceBrand = data.deviceBrand;
                that.repairInfo.device.deviceType = data.deviceType;
                that.repairInfo.device.deviceModel = data.deviceModel;
                that.repairInfo.device.sequence = data.sequence;
                that.repairInfo.device.dateOfDevice = data.dateOfDevice;
                that.repairInfo.device.workHours = data.workHours;
                that.repairInfo.device.warrantyStatus = data.warrantyStatus;
                that.repairInfo.device.siteLocation = data.siteLocation;
                that.repairInfo.device.halt = data.halt;
                that.repairInfo.device.mainId = data.mainId;
                that.repairInfo.device.id = data.deviceId;
                that.repairInfo.device.deviceTypeId = data.deviceTypeId;
                that.repairInfo.device.deviceModelId = data.deviceModelId;
                that.repairInfo.device.deviceBrandId = data.deviceBrandId;
                that.repairInfo.device.siteLocationDetail = data.siteLocationDetail;

                that.repairInfo.repair.id = data.mainId;
                that.repairInfo.repair.serialNo = data.serialNo;
                that.repairInfo.repair.callerName = data.callerName;
                that.repairInfo.repair.callerTel = data.callerTel;
                that.repairInfo.repair.customerId = data.customerId;
                that.repairInfo.repair.customerName = data.customerName;
                that.repairInfo.repair.callerType = data.callerType;
                that.repairInfo.repair.customerTel = data.customerTel;
                that.repairInfo.repair.callType = data.callType;
                that.repairInfo.repair.appointDate = data.appointDate;
                that.repairInfo.repair.appointTime = data.appointTime;
                that.repairInfo.repair.serverStation = data.serverStation;
                that.repairInfo.repair.serverStationId = data.serverStationId;
                that.repairInfo.repair.acceptName = data.acceptName;
                that.repairInfo.repair.acceptTel = data.acceptTel;
                that.repairInfo.repair.messageFlag = data.messageFlag;

                that.repairInfo.repair.consultNo = data.consultNo;
                that.repairInfo.repair.id = data.repairId;
                that.repairInfo.repair.mainId = data.mainId;
                that.repairInfo.repair.createTime = data.createTime;
                that.repairInfo.repair.repairStatus = data.repairStatus;
                that.repairInfo.repair.internalOfRepair = data.internalOfRepair;
                that.repairInfo.repair.createUserName = data.createUserName;
                that.repairInfo.repair.createUserId = data.createUserId;
                that.repairInfo.repair.registerContent = data.registerContent;
                that.repairInfo.repair.liveLinkmanType = data.liveLinkmanType;
                that.repairInfo.repair.liveLinkmanName = data.liveLinkmanName;
                that.repairInfo.repair.liveLinkmanTel = data.liveLinkmanTel;
                that.repairInfo.repair.repairType = data.repairType;
                that.repairInfo.repair.acceptId = data.acceptId;
                that.getDeviceBrand();
                if (that.repairInfo.repair.repairStatus &&
                    (that.repairInfo.repair.repairStatus == 'done' || that.repairInfo.repair.repairStatus == 'shut' || that.repairInfo.repair.repairStatus == 'revoke')) {
                    that.pageType = 'look';
                }
            },

            getDeviceList: function () {
                var that = this;
                $.wyui.postMethod("/serveDevice/getDeviceListByCustomerId.json", {customerId: that.repairInfo.repair.customerId}, function (data) {
                    that.customerDeviceList = data;
                });
            },
        },
        mounted: function () {
            var that = this;
            that.pageType = $.wyui.page.urlParams.pageType;
            /*undo	未处理
             doing	处理中
             done	已处理
             shut	关单
             revoke	撤单*/


            if ($.wyui.page.urlParams.id && $.wyui.page.urlParams.id != 0) {
                //查看和修改要获取初始数据
                $.wyui.postMethod("/serveRepair/getServeRepairObjectById.json", {
                    "repairId": $.wyui.page.urlParams.id
                }, function (data) {
                    //数据处理
                    that.splitData(data);
                    that.iniItem();
                });
            }else{
                that.iniItem();
            }




            setTimeout(function () {
                getServe()
            }, 1000);
        }

    });

</script>
<script>
    $(function () {
        getServe();
    });

    function getServe() {
        //客户姓名
        $("#customerName").autoComplete({
            url: server.ip + "/serveUser/getServeUserInfoTop10.json",
            render: function (data, panel) {
                data = data.sendData;
                for (var i = 0; i < data.length; i++) {
                    $("<li></li>").data("autoComplete",
                        data[i]).html("<a>" + data[i].customerName + "(" + data[i].customerTel + ")</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                app.repairInfo.repair.customerName = user.customerName;
                app.repairInfo.repair.customerTel = user.customerTel;
                app.repairInfo.repair.customerId = user.customerId;
                return false;
            },
            height: 210,
            width: 300
        });

        $("#callerTel").autoComplete({
            url: server.ip + "/serveUser/getServeUserInfoTop10ByCallerTel.json",
            render: function (data, panel) {
                data = data.sendData;
                for (var i = 0; i < data.length; i++) {
                    $("<li></li>").data("autoComplete",
                        data[i]).html("<a>" + data[i].callerName + "(" + data[i].callerTel + ")</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                app.repairInfo.repair.callerTel = user.callerTel;
                app.repairInfo.repair.callerId = user.callerId;
                return false;
            },
            height: 210,
            width: 300
        });

        $("#callerName").autoComplete({
            url: server.ip + "/serveUser/getServeUserInfoTop10ByCallerName.json",
            render: function (data, panel) {
                data = data.sendData;
                for (var i = 0; i < data.length; i++) {
                    $("<li></li>").data("autoComplete",
                        data[i]).html("<a>" + data[i].callerName + "(" + data[i].callerTel + ")</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                app.repairInfo.repair.callerName = user.callerName;
                app.repairInfo.repair.callerTel = user.callerTel;
                app.repairInfo.repair.callerId = user.callerId;
                return false;
            },
            height: 210,
            width: 300
        });

        $("#livelinkmanName").autoComplete({
            url: server.ip + "/serveUser/getServeUserInfoTop10ByCallerName.json",
            render: function (data, panel) {
                data = data.sendData;
                for (var i = 0; i < data.length; i++) {
                    $("<li></li>").data("autoComplete",
                        data[i]).html("<a>" + data[i].callerName + "(" + data[i].callerTel + ")</a>")
                        .appendTo(panel);
                }
            },
            selected: function (user) {
                app.repairInfo.repair.liveLinkmanName = user.callerName;
                app.repairInfo.repair.liveLinkmanTel = user.callerTel;
                app.repairInfo.repair.liveLinkmanId = user.callerId;
                return false;
            },
            height: 210,
            width: 300
        });
    };
</script>
</html>